<html>
    <head>
        <title>MapLibre 卫星影像</title>
        <script src="https://unpkg.com/maplibre-gl@^5.13.0/dist/maplibre-gl.js"></script>
        <link href="https://unpkg.com/maplibre-gl@^5.13.0/dist/maplibre-gl.css" rel="stylesheet" />
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            #map {
                width: 100vw;
                height: 100vh;
            }
            #controls {
                position: absolute;
                top: 10px;
                right: 10px;
                z-index: 1;
                background: white;
                padding: 10px;
                border-radius: 5px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.2);
                display: flex;
                flex-direction: column;
                gap: 5px;
            }
            button {
                padding: 8px 12px;
                cursor: pointer;
                background-color: #4285f4;
                color: white;
                border: none;
                border-radius: 3px;
                font-size: 14px;
            }
            button:hover {
                background-color: #3367d6;
            }
            button.active {
                background-color: #0d47a1;
            }
        </style>
    </head>
    <body>
        <div id="controls">
            <button id="btnStreet" class="active">街道地图</button>
            <button id="btnAll">混合显示</button>
            <button id="btnGaodeSatellite">高德卫星影像</button>
        </div>
        <div id="map"></div>
        <script>
            // 等待页面完全加载后再初始化地图
            window.onload = function() {
                // 初始化地图
                var map = new maplibregl.Map({
                    container: 'map',
                    style: 'https://demotiles.maplibre.org/globe.json',
                    center: [116.3974, 39.9093], // 北京
                    zoom: 10
                });
                
                // 高德卫星影像源
                var gaodeSatelliteSource = {
                    "type": "raster",
                    "tiles": [
                        "https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
                        "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
                        "https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
                        "https://webst04.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
                    ],
                    "tileSize": 256,
                    "attribution": "© 高德地图"
                };
                
                // 当前模式
                var currentMode = 'street';
                var satelliteLayerAdded = false;
                
                // 切换模式
                function switchMode(mode) {
                    if (mode === currentMode) return;
                    
                    if (mode === 'street') {
                        // 切换到街道地图模式
                        // 隐藏卫星影像图层
                        if (map.getLayer('gaode-satellite-layer')) {
                            map.setLayoutProperty('gaode-satellite-layer', 'visibility', 'none');
                        }
                        
                        // 恢复街道地图图层为不透明
                        setStreetLayersOpacity(1.0);
                    }
                    else
                    {
                    	// 切换到高德卫星影像模式
                        // 添加高德卫星影像源
                        if (!map.getSource('gaode-satellite')) {
                            map.addSource('gaode-satellite', gaodeSatelliteSource);
                        }
                        
                        // 添加卫星影像图层（作为最底层）
                        if (!satelliteLayerAdded) {
                            map.addLayer({
                                "id": "gaode-satellite-layer",
                                "type": "raster",
                                "source": "gaode-satellite",
                                "minzoom": 3,
                                "maxzoom": 18
                            });
                            satelliteLayerAdded = true;
                        } else {
                            // 如果图层已存在，确保其可见
                            map.setLayoutProperty('gaode-satellite-layer', 'visibility', 'visible');
                        }
                        
                        // 将卫星图层移动到coastline之下，background之上
                        try {
                            if (mode === 'gaodeSatellite') {
                                map.moveLayer('gaode-satellite-layer');
                            }
                            else {
                                map.moveLayer('gaode-satellite-layer','coastline');
                            }
                        } catch(e) {
                            console.log('移动图层时出错，可能图层已在最底层:', e.message);
                        }
                        
                        // 设置所有街道地图图层为半透明
                        setStreetLayersOpacity(0.33);
                    }
                    
                    currentMode = mode;
                    
                    // 更新按钮状态
                    document.querySelectorAll('#controls button').forEach(btn => {
                        btn.classList.remove('active');
                    });
                    document.getElementById('btn' + mode.charAt(0).toUpperCase() + mode.slice(1)).classList.add('active');
                    
                    console.log('切换到:', mode);
                }
                
                // 设置街道地图图层透明度的函数
                function setStreetLayersOpacity(opacity) {
                    // 获取所有图层
                    var layers = map.getStyle().layers;
                    
                    // 遍历所有图层，为街道相关图层设置透明度
                    for (var i = 0; i < layers.length; i++) {
                        var layer = layers[i];
                        //console.log('图层:', layer.id);
                        
                        // 跳过卫星图层
                        if (layer.id === 'gaode-satellite-layer') continue;
                        
                        // 设置图层的透明度
                        try {
                            // 对于不同图层类型，可能需要设置不同的透明度属性
                            if (layer.type === 'fill') {
                                map.setPaintProperty(layer.id, 'fill-opacity', opacity);
                            } else if (layer.type === 'line') {
                                map.setPaintProperty(layer.id, 'line-opacity', opacity);
                            } else if (layer.type === 'symbol') {
                                // 文字标签可能需要保持较高可见度
                                map.setPaintProperty(layer.id, 'text-opacity', Math.min(1.0, opacity + 0.3));
                            } else if (layer.type === 'circle') {
                                map.setPaintProperty(layer.id, 'circle-opacity', opacity);
                            } else if (layer.type === 'raster') {
                                map.setPaintProperty(layer.id, 'raster-opacity', opacity);
                            }
                        } catch(e) {
                            // 某些图层可能不支持透明度属性，忽略错误
                            console.log('设置图层透明度时出错:', layer.id, e.message);
                        }
                    }
                }
                
                // 添加导航控件
                map.addControl(new maplibregl.NavigationControl());
                
                // 等待地图加载完成后绑定事件
                map.on('load', function() {
                    console.log('地图加载完成');
                    
                    // 按钮事件绑定
                    document.getElementById('btnStreet').addEventListener('click', function() {
                        switchMode('street');
                    });
                    
                    document.getElementById('btnAll').addEventListener('click', function() {
                        switchMode('all');
                    });

                    document.getElementById('btnGaodeSatellite').addEventListener('click', function() {
                        switchMode('gaodeSatellite');
                    });
                });
                
                // 错误处理
                map.on('error', function(e) {
                    console.error('地图错误:', e.error);
                    if (e.error && e.error.message) {
                        console.error('错误详情:', e.error.message);
                    }
                });
            };
        </script>
    </body>
</html>
